<template>
  <div class="accumulate-points">
    <div class="head">
      <h2>
        <img src="../assets/img/score.png" alt="" />
        积分攻略
      </h2>
    </div>
    <div class="content">
      <ul>
        <li>
          <img src="../assets/img/integral-01.9386d4bf.png" alt="" />
          <div class="content-info">
            <p>签到得鸡腿</p>
            <div>去签到</div>
          </div>
        </li>
        <li>
          <img src="../assets/img/integral-02.150d92a1.png" alt="" />
          <div class="content-info">
            <p>购课得鸡腿</p>
            <div>去购课</div>
          </div>
        </li>
        <li>
          <img src="../assets/img/integral-03.9870f3f1.png" alt="" />
          <div class="content-info">
            <p>推荐得鸡腿</p>
            <div>去推荐</div>
          </div>
        </li>
        <li>
          <img src="../assets/img/integral-04.afadcbdf.png" alt="" />
          <div class="content-info">
            <p>做任务得鸡腿</p>
            <div>做任务</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.accumulate-points {
  width: 1200px;
  margin: 30px auto;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      img {
        margin-right: 10px;
      }
      display: flex;
      font-size: 30px;
      align-items: center;
    }
  }
  .content {
    margin-top: 30px;
    ul {
      display: flex;
      justify-content: space-between;
      li {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        img {
          transition: all 0.8s;
        }
        &:hover img {
          transform: scale(1.1);
        }
        .content-info {
          position: absolute;
          top: 45px;
          left: 30px;
          p {
            font-size: 24px;
            font-weight: 800;
            color: #fff;
          }
          div {
            margin-top: 20px;
            width: 100px;
            height: 30px;
            border: 1px solid #fff;
            color: #fff;
            line-height: 30px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
